En komplett referensmanual för modern webbdesign
CSS (Cascading Style Sheets) är språket som används för att beskriva presentationen av ett dokument skrivet i HTML. Medan HTML strukturerar innehållet, styr CSS layout, färger, typsnitt och hur element anpassar sig till olika skärmstorlekar. Utan CSS skulle webben vara en oändlig lista av tråkig text.
Denna guide täcker allt från grundläggande syntax till avancerade layoutsystem och moderna funktioner som revolutionerat webbdesign. Målet är att ge dig verktygen för att skapa professionella, responsiva och visuellt tilltalande webbplatser.
En CSS-regel består av en selektor och ett deklarationsblock. Selektorn pekar ut vilket HTML-element som ska stilas.
/* Element-selektor */
p {
color: blue;
}
/* Klass-selektor (börjar med punkt) */
.min-klass {
font-weight: bold;
}
/* ID-selektor (börjar med brädgård) */
#min-header {
background-color: #333;
}
Avancerade selektorer:
*: Universal-selektor (väljer alla element).div > p: Barn-selektor (väljer p som är direkta barn till div).div + p: Syskon-selektor (väljer p som kommer direkt efter en div).[type="text"]: Attribut-selektor.Detta är hörnstenen i all webblayout. Varje element på en webbsida är en rektangulär låda. Lådan består av fyra delar, inifrån och ut:
.box {
width: 300px; /* Bredd på content */
padding: 20px; /* Luft inuti lådan */
border: 5px solid black; /* Kantlinje */
margin: 15px; /* Luft utanför lådan */
/* Viktigt: Ändrar hur bredden beräknas */
box-sizing: border-box;
}
Att använda box-sizing: border-box; rekommenderas starkt då det inkluderar padding och border i den
totala bredden, vilket gör layoutberäkningar mycket enklare.
CSS stöder flera sätt att definiera färger:
red, blue#ff0000 (vanligast)rgba(255, 0, 0, 0.5) (stödjer genomskinlighet)hsl(0, 100%, 50%) (Nyans, Mättnad, Ljusstyrka)body {
background-color: #f0f0f0;
background-image: url('monster.png');
background-size: cover; /* Täcker hela ytan */
background-position: center;
}
Att styra textens utseende är centralt för läsbarhet och design.
h1 {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase; /* GÖR ALLT TILL VERSALER */
letter-spacing: 2px; /* Öka avstånd mellan bokstäver */
text-align: center;
}
Flexbox är designat för endimensionella layouter (en rad eller en kolumn). Det är perfekt för navigationsmenyer och centrering av element.
.container {
display: flex;
justify-content: center; /* Centrera horisontellt */
align-items: center; /* Centrera vertikalt */
gap: 20px; /* Mellanrum mellan barn */
}
.item {
flex: 1; /* Alla barn tar lika mycket plats */
}
Grid är ett tvådimensionellt system (rader och kolumner samtidigt). Det är det mest kraftfulla layoutverktyget i CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 lika stora kolumner */
grid-gap: 20px;
}
.header {
grid-column: 1 / -1; /* Spänner över alla kolumner */
}
Media queries gör det möjligt att applicera olika CSS-regler beroende på skärmstorlek. Detta är kärnan i responsiv design.
/* Standardstilar för mobil (Mobile-First) */
body {
font-size: 16px;
}
/* För surfplattor och större */
@media (min-width: 768px) {
body {
font-size: 18px;
}
.container {
flex-direction: row; /* Byt från kolumn till rad */
}
}
/* För desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
margin: 0 auto;
}
}
Variabler gör koden mer underhållbar genom att du kan definiera värden på ett ställe och återanvända dem.
:root {
--primary-color: #3498db;
--spacing-unit: 16px;
}
button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
För att flytta, rotera eller skala element, samt göra förändringar mjuka.
.card {
transition: transform 0.3s ease; /* Mjuk övergång */
}
/* OBS: Hover-effekter fungerar inte i detta dokument men så här kodas de */
.card:hover {
transform: translateY(-10px) scale(1.05); /* Flytta upp och förstora */
}
Till skillnad från Media Queries som tittar på skärmbredden, tittar Container Queries på bredden av föräldraelementet. Detta gör komponenter verkligt modulära.
.parent {
container-type: inline-size;
}
@container (min-width: 500px) {
.child {
display: flex; /* Byt layout om containern är bredare än 500px */
}
}
Funktionen clamp() sätter ett värde som har ett minimum, ett idealvärde och ett maximum. Perfekt för
responsiv typografi.
h1 {
font-size: clamp(2rem, 5vw, 4rem);
/* Minst 2rem, helst 5% av skärmbredden, max 4rem */
}
Styr bildförhållandet på element, perfekt för video eller bilder som ska behålla proportioner.
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}
Här är kompletta kodexempel för vanliga designmönster.
<style>
.card-grid {
display: grid;
/* Automatiskt antal kolumner, minst 250px breda */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-img {
height: 150px;
background-color: #ccc;
width: 100%;
object-fit: cover;
}
.card-content {
padding: 15px;
}
</style>
<div class="card-grid">
<div class="card">
<div class="card-img"></div>
<div class="card-content">
<h3>Kortrubrik 1</h3>
<p>Detta är en beskrivning av kortet.</p>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="card-content">
<h3>Kortrubrik 2</h3>
<p>Kort anpassar sig automatiskt.</p>
</div>
</div>
</div>
<style>
.page-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
min-height: 400px;
}
/* Mobilanpassning */
@media (max-width: 600px) {
.page-layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
.layout-header { grid-area: header; background: #333; color: white; padding: 20px; }
.layout-sidebar { grid-area: sidebar; background: #f4f4f4; padding: 20px; }
.layout-main { grid-area: main; background: #fff; padding: 20px; border: 1px solid #eee; }
.layout-footer { grid-area: footer; background: #333; color: white; padding: 20px; text-align: center; }
</style>
<div class="page-layout">
<header class="layout-header">Header</header>
<aside class="layout-sidebar">Sidebar (Meny)</aside>
<main class="layout-main">
<h2>Huvudinnehåll</h2>
<p>Här ligger sidans primära text.</p>
</main>
<footer class="layout-footer">Footer</footer>
</div>
<style>
.hero {
height: 60vh; /* 60% av skärmhöjden (används sällan i dokument, men standard på webben) */
min-height: 300px;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;
}
.hero-content {
max-width: 600px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
font-weight: bold;
}
</style>
<div class="hero">
<div class="hero-content">
<h1>Välkommen till Framtiden</h1>
<p>Vi bygger digitala upplevelser som förändrar världen.</p>
<a href="#" class="btn">Läs mer</a>
</div>
</div>
När projekt växer blir ren CSS svårhanterlig. Preprocessorer som SASS och LESS lägger till funktioner som nesting, mixins och loopar som sedan kompileras till vanlig CSS.
/* SCSS Exempel (kan ej köras direkt i webbläsaren) */
$primary-color: #333;
.nav {
background: $primary-color;
ul {
margin: 0;
padding: 0;
li { display: inline-block; }
}
}
För att säkerställa att din CSS inte saktar ner webbplatsen:
@import inuti CSS-filer blockerar laddning. Länka
istället alla filer i HTML-huvudet.
Alla webbläsare stöder inte de senaste funktionerna samtidigt. Använd verktyg som "Can I Use" för att kontrollera
stöd. För att maximera kompatibilitet används ofta "Vendor Prefixes" (t.ex. -webkit-), även om
behovet av dessa minskar med moderna webbläsare.
Slutord: CSS är ett djupt och kraftfullt språk. Genom att bemästra boxmodellen, Flexbox och Grid har du grunden för att bygga vad som helst. Fortsätt experimentera och håll dig uppdaterad med nya funktioner som kontinuerligt läggs till i standarden.